import { Carousel, WingBlank } from "antd-mobile";
import { SearchOutline, EnvironmentOutline } from "antd-mobile-icons";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { getCurrentCity } from "../../../utils/index.js";
export default function Swiper(props) {
  const navigate = useNavigate();
  const state = {
    imgHeight: 200,
  };
  const { swiperList } = props;
  const [cityName, setCityName] = useState("嘉兴");
  useEffect(() => {
    getCurrentCity().then((res) => {
      setCityName(res);
    });
  }, []);

  return (
    <div className="swiper" style={{ height: state.imgHeight }}>
      <div className="search">
        <div
          className="input"
          onClick={() => {
            navigate("/selectCity");
          }}
        >
          <div style={{'padding':'0 10px'}}>
            {cityName} 
          </div>
          <SearchOutline fontSize={16} />
          请输入你要搜索的城市名称
        </div>
        <EnvironmentOutline
          fontSize={20}
          color="#fff"
          onClick={() => navigate("/map")}
        />
      </div>
      <WingBlank>
        <Carousel infinite>
          {swiperList.map((val) => (
            <img
              src={val}
              key={val}
              alt=""
              style={{
                width: "100%",
                verticalAlign: "top",
                height: state.imgHeight,
              }}
            />
          ))}
        </Carousel>
      </WingBlank>
    </div>
  );
}
